<!--
 * @Description: 注册页面
-->
<template>
  <div class="choose-company">
    <div class="main-content">
      <div class="main">
        <div v-if="registerStau === 1" class="form-content">
          <!-- 左侧盒子 -->
          <div class="left-box">
            <div class="left-one"></div>
            <div class="left-two">养殖管理系统</div>
            <div class="left-three">Enterprise Data Service Solutions</div>
          </div>
          <!-- 选顶级组织结构 -->
          <div class="right-list">
            <div class="org-title">
              <div class="sel-te">注册-填写信息</div>
            </div>
            <div class="form-list">
              <p>
                <span :required="true">账号名:</span>
                <el-input
                  v-model="addlist.username"
                  class="put-sty"
                  placeholder="请输入账号名"
                />
              </p>
              <p>
                <span :required="true">昵称:</span>
                <el-input
                  v-model="addlist.nickname"
                  class="put-sty"
                  placeholder="请输入昵称"
                />
              </p>
              <p>
                <span :required="true">姓名:</span>
                <el-input
                  v-model="addlist.name"
                  class="put-sty"
                  placeholder="请输入姓名"
                />
              </p>
              <p>
                <span>身份证号码:</span>
                <el-input
                  v-model="addlist.identificationNumber"
                  class="put-sty"
                  placeholder="请输入身份证号码"
                />
              </p>
              <p>
                <span>11位手机号:</span>
                <el-input
                  v-model="addlist.phone"
                  class="put-sty"
                  placeholder="11位手机号"
                />
              </p>
              <!-- <p>
                <span>微信:</span>
                <el-input
                  v-model="addlist.weChat"
                  class="put-sty"
                  placeholder="微信"
                />
              </p>
              <p>
                <span>邮箱:</span>
                <el-input
                  v-model="addlist.email"
                  class="put-sty"
                  placeholder="邮箱"
                />
              </p>-->
              <p>
                <span>输入密码:</span>
                <el-input
                  v-model="addlist.passwordone"
                  class="put-sty"
                  show-password
                  type="password"
                  placeholder="输入密码"
                />
              </p>
              <p>
                <span>确认密码:</span>
                <el-input
                  v-model="addlist.passwordtwo"
                  show-password
                  type="password"
                  class="put-sty"
                  placeholder="确认密码"
                />
              </p>
            </div>
            <div class="bot-but">
              <div class="tonext" @click="tonextstep()">下一步</div>
              <router-link to="login">
                <div class="tologin">使用已有帐户登录</div>
              </router-link>
            </div>
          </div>
        </div>
        <div v-if="registerStau === 2" class="content">
          <!-- 选顶级组织结构 -->
          <div v-if="selectstau === 1" class="org-list">
            <div class="org-title">
              <div class="sel-te">注册页面</div>
            </div>
            <div class="search">
              <input
                v-model="companyName"
                placeholder="请输入公司名称"
                class="search-input"
                @change="getFarmtreeList()"
              />
              <div class="search-button" @click="getFarmtreeList()">查询</div>
            </div>
            <div class="company-list">
              <div
                v-for="(item, index) in organizationList"
                :key="item.organizationNo"
                :class="Toindex === index ? 'sel-companys' : 'sel-company'"
                @click="goToselectFarm(item, index)"
              >
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="点击进行审核"
                  placement="top-start"
                >
                  <span>{{ item.organizationName }}</span>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
        <el-dialog
          :title="'确认信息'"
          :visible.sync="dialogFormVisible"
          :before-close="
            () => {
              dialogFormVisible = false;
            }
          "
          width="40%"
        >
          <el-form
            ref="formData"
            label-position="left"
            :model="formData"
            :rules="rules"
            class="el-form"
          >
            <el-form-item
              label="账号名:"
              class="w100p"
              :rules="{
                required: true,
                message: '账号名不能为空',
                trigger: 'blur',
              }"
              prop="username"
            >
              <el-input v-model="formData.username" @input="userdel" />
            </el-form-item>
            <el-form-item label="昵称:" class="w100p" prop="nickname">
              <el-input v-model="formData.nickname" />
            </el-form-item>
            <el-form-item
              label="姓名:"
              :rules="{
                required: true,
                message: '姓名不能为空',
                trigger: 'blur',
              }"
              class="w100p"
              prop="name"
            >
              <el-input v-model="formData.name" />
            </el-form-item>
            <el-form-item
              label="身份证号码:"
              :rules="{
                required: true,
                message: '身份证号码不能为空',
                trigger: 'blur',
              }"
              class="w100p"
              prop="identificationNumber"
            >
              <el-input v-model="formData.identificationNumber" clearable />
            </el-form-item>
            <el-form-item
              label="手机号:"
              :rules="{
                required: true,
                message: '手机号不能为空',
                trigger: 'blur',
              }"
              class="w100p"
              prop="phone"
            >
              <el-input v-model="formData.phone" clearable />
            </el-form-item>
            <el-form-item
              label="基地:"
              :rules="{
                required: true,
                message: '基地不能为空',
                trigger: 'blur',
              }"
              class="w100p"
              prop="organizationName"
            >
              <el-input v-model="formData.organizationName" disabled />
            </el-form-item>
            <el-form-item label="微信:" class="w100p" prop="weChat">
              <el-input v-model="formData.weChat" clearable />
            </el-form-item>
            <el-form-item label="邮箱:" class="w100p" prop="email">
              <el-input v-model="formData.email" clearable />
            </el-form-item>
            <div
              v-for="(domain, index) in formData.domains"
              :key="domain.key"
              class="dzConfidentiality"
            >
              <el-form-item
                :label="'密保问题' + (index + 1)"
                :prop="'domains.' + index + '.securityQuestion'"
                :rules="{
                  required: true,
                  message: '问题不能为空',
                  trigger: 'blur',
                }"
                style="display: flex"
              >
                <el-input v-model="domain.securityQuestion" />
                <!-- <el-button v-if="formData.domains.length > 1 " @click.prevent="removeDomain(domain)">删除</el-button> -->
              </el-form-item>
              <el-form-item
                :label="'密保答案' + (index + 1)"
                :prop="'domains.' + index + '.securityAnswer'"
                :rules="{
                  required: true,
                  message: '答案不能为空',
                  trigger: 'blur',
                }"
              >
                <el-input v-model="domain.securityAnswer" />
              </el-form-item>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <!-- <el-button v-if="formData.domains.length < 2" @click="addDomain(formData.username)">新增密保问题</el-button> -->
            <el-button
              class="zh-button-one"
              @click="dialogFormVisible = false"
            >取 消</el-button>
            <el-button
              class="zh-button-two"
              type="primary"
              @click="lasttoindex('formData')"
            >确 认</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import userService from "@/api/user/index";
import { isPoneAvailable } from "@/utils/validate";
export default {
  name: "",
  data() {
    return {
      addlist: {
        username: "", // 用户名
        nickname: "", // 昵称
        passwordone: "", // 密码
        passwordtwo: "", // 密码
        identificationNumber: "", // 身份证
        phone: "", // 电话
        address: "", // 地址
        weChat: "", // 微信
        email: "", // 邮箱
        birthday: "", // 生日
        entryTime: new Date().getTime(),
        organizationNo: "",
        organizationName: "",
        companyId: "", // 组织机构名称
        companyName: "" // 顶级组织名称
      },
      registerStau: 1, // 1填写信息页面 2为选择结构页面
      selectstau: 1, // 1为选择顶级组织结构，2为选择选择农场
      organizationList: [], // 顶级组织结构列表
      activeIdx: "",
      search: "",
      farmList: [],
      companyName: "",
      Toindex: "",
      dialogFormVisible: false,
      formData: {
        domains: []
      },
      rules: {}
    };
  },
  computed: {},
  watch: {},
  created() {
    // 查询农场
    this.getFarmtreeList();
  },
  mounted() {},
  methods: {
    // 点击下一步
    tonextstep() {
      if (this.addlist.username.length === 0) {
        this.$message.warning("请填写用户名");
        return;
      }
      if (this.addlist.name.length === 0) {
        this.$message.warning("请填写姓名");
        return;
      }
      if (this.addlist.identificationNumber.length === 0) {
        this.$message.warning("请填写身份证");
        return;
      }
      if (this.addlist.passwordone.length === 0) {
        this.$message.warning("密码不能为空");
        return;
      }
      if (this.addlist.passwordone.length < 6) {
        this.$message.warning("密码不能小于六位");
        return;
      }
      if (this.addlist.passwordone !== this.addlist.passwordtwo) {
        this.$message.warning("密码不一致");
        return;
      } else {
        this.addlist.password = this.addlist.passwordone;
      }
      // let isemail = isEmailAvailable(this.addlist.address)
      // if (isemail === false) {
      //   this.$message.warning("邮箱格式错误")
      //   return
      // }
      let isphone = isPoneAvailable(this.addlist.phone);
      if (isphone === false) {
        this.$message.warning("手机格式错误");
        return;
      }
      this.$message.success("基本信息填写成功，请选择组织结构");
      this.registerStau = 2;
    },
    // 获取顶级组织结构id
    getFarmtreeList(e) {
      // console.log(e)
      // 获取顶级组织结构id,
      this.Toindex = "";
      userService.getcompanyregist(this.companyName).then(res => {
        // this.farmList = res.data
        let childlistone = res.data;
        this.organizationList = childlistone;
        // this.organizationList = this.filterArrForKey(childlistone)
      });
    },

    // 点击组织结构触发方法
    goToselectFarm(e, index) {
      if (e) {
        this.Toindex = index;
        this.$set(this.addlist, "organizationNo", e.organizationNo);
        this.$set(this.addlist, "organizationName", e.organizationName);
        this.$set(this.addlist, "organizationNoList", [e.organizationNo]);
        this.$set(this.addlist, "companyId", e.companyId);
        this.$set(this.addlist, "companyName", e.companyName);
        this.formData = {
          ...this.addlist,
          domains: [
            {
              securityAnswer: "",
              securityQuestion: "",
              key: 1,
              userName: this.addlist.username
            },
            {
              securityAnswer: "",
              securityQuestion: "",
              key: 2,
              userName: this.addlist.username
            }
          ]
        };
        this.dialogFormVisible = true;
      } else {
        this.Toindex = "";
      }
    },
    // 点击确认按钮
    async lasttoindex() {
      // 当前选中节点列表
      const { data: res } = await userService.batchToParentByChild(
        this.formData.organizationNo
      );
      // console.log(res)
      this.$set(this.formData, "topOrganizationNo", res.organizationNo);
      this.$set(this.formData, "topOrganizationName", res.organizationName);
      // this.topOrganizationNo
      this.adduserinfo();
      //  this.$router.push({ name: "login" });
    },
    removeDomain(item) {
      var index = this.formData.domains.indexOf(item);
      if (index !== -1) {
        this.formData.domains.splice(index, 1);
      }
    },
    addDomain(e) {
      this.formData.domains.push({
        securityAnswer: "",
        securityQuestion: "",
        key: Date.now(),
        userName: e
      });
    },
    // 用户名更换 更改密保问题
    userdel(e) {
      this.formData.domains.forEach(item => {
        this.$set(item, "userName", e);
      });
      // this.$set(this.formData, 'domains', domains)
      // tis.$()
    },
    // 添加用户信息
    adduserinfo() {
      this.$refs["formData"].validate(valid => {
        if (valid) {
          let params = {
            ...this.formData,
            person: {
              ...this.formData,
              account: this.formData.username
            }
          };
          delete params.passwordone;
          delete params.passwordone;
          delete params.identificationNumber;
          delete params.phone;
          delete params.address;
          delete params.weChat;
          delete params.email;
          delete params.birthday;
          if (this.formData.username.length === 0) {
            this.$message.warning("请填写用户名");
            return;
          }
          if (this.formData.name.length === 0) {
            this.$message.warning("请填写姓名");
            return;
          }
          if (this.formData.identificationNumber.length === 0) {
            this.$message.warning("请填写身份证");
            return;
          }
          // return
          userService.registuser(params).then(res => {
            if (res.code === 1) {
              // this.$message.success("信息填写完成请等待审核");
              userService
                .regisSecurityQuestion({ securityQuestionList: params.domains })
                .then(res => {
                  if (res.code === 1) {
                    this.$message.success("信息填写完成请等待审核");
                    setTimeout(() => {
                      this.$router.push({ name: "login" });
                    }, 300);
                  } else {
                    // this.$message.error(res.msg || "用户信息提交失败");
                  }
                });
            } else {
              this.$message.error(res.msg || "用户信息提交失败");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    cascaderChange(e) {
      // console.log(e)
    },
    // 点击农场
    // goToTheFarm(organizationNo) {
    //   setToken("organizationNo", organizationNo);
    //   this.$router.push({ name: "EnvironmentalDataMonitoring" });
    // },
    // 循环过滤树形数组
    filterArrForKey(arr) {
      let newArr = [];
      if (arr === []) {
        return;
      }
      newArr = arr.map(item => {
        if (item.child.length > 0) {
          item = {
            ...item,
            child: this.filterArrForKey(item.child)
          };
        } else {
          delete item.child;
        }
        return item;
      });
      newArr = newArr.filter(item => item != null);
      return newArr;
    },
    // ---侧边栏abcd选择，然而并没什么用
    changeActiveIdx(idx, item) {
      this.activeIdx = idx;
      this.search = item;
      // console.log(this.search);
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
@keyframes borderbg {
  from {
    border-radius: 0;
  }
  to {
    background-color: $appMainTextColor;
    color: #333;
    border-radius: 20px;
  }
}

::v-deep  {
  .el-dialog__body {
    overflow-y: auto;
  }
}
$slidebarWidth: 40px;
.choose-company {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    150.62deg,
    #b0c9e8,#d1dcef 100%,#c4daef 0);
  overflow: hidden;
  position: relative;
  .main-content {
    display: flex;
    width: 100%;
    height: 100%;
    // background: url("~@/assets/newbackground.png");
    background-size: cover;
    background-repeat: no-repeat;
    font-size: 14px;
    .el-scrollbar {
      background-color: #006988;
      .slidebar {
        width: $slidebarWidth;
        height: 100%;
        // overflow-y: auto;
        .list {
          width: 100%;
          .item {
            width: $slidebarWidth;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: $appMainTextColor;
            font-size: 16px;
            &:hover {
              animation-name: borderbg;
              animation-iteration-count: 1;
              animation-fill-mode: forwards;
              animation-duration: 0.5s;
            }
          }
          .active {
            font-weight: bold;
            background-color: $appMainTextColor;
            color: #333;
            border-radius: 20px;
          }
        }
      }
    }

    .main {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .form-content {
        width: 1200px;
        height: 600px;
        background-image: url(https://img.js.design/assets/img/612999769c042d00d48150ee.jpg);
        background-color: rgba(138, 141, 141, 0.8);
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        .right-list {
          width: 690px;
          height: 600px;
          background-color: rgba(0, 81, 81, 1);
          .org-title {
            height: 60px;
            // border-bottom: $appMainTextColor 1px solid;
            color: $appMainTextColor;
            padding-left: 20px;
            font-size: 20px;
            display: flex;
            align-items: center;
            .sel-te {
              padding-left: 10px;
              line-height: 27px;
              height: 27px;
              border-left: $appMainTextColor 4px solid;
              color: $appMainTextColor;
              font-size: 18px;
            }
          }
          .form-list {
            margin-top: 20px;
            height: 75%;
            .put-sty {
              display: block;
              margin: 0px auto 0px;
              outline: none;
              border-radius: 0;
              width: 380px;
              height: 30px;
              // padding: 1px 10px;
            }
            > p {
              display: flex;
              align-items: center;
              justify-content: center;
              align-content: center;
              margin-bottom: 22px;
              color: $appMainTextColor;
              > span {
                display: inline-block;
                width: auto;
                min-width: 180px;
                text-align: right;
                padding-left: 30px;
              }
            }
          }
          .bot-but {
            width: 380px;
            margin: 5px auto 0px;
            display: flex;
            .tonext {
              font-size: 18px;
              color: $appMainTextColor;
              width: 176px;
              height: 40px;
              line-height: 40px;
              text-align: center;
              background-color: rgba(127, 211, 84, 1);
              border-radius: 2px;
              cursor: pointer;
            }
            .tonext:hover {
              color: rgb(183, 241, 212);
            }
            .tologin {
              width: 200px;
              height: 40px;
              color: rgba(255, 255, 255, 1);
              font-size: 14px;
              line-height: 40px;
              text-align: right;
            }
            .tologin:hover {
              color: springgreen;
            }
          }
        }
        .left-box {
          width: 520px;
          height: 600px;
          background-color: rgba(32, 32, 32, 0.6);
          .left-one {
            margin-top: 140px;
            width: 520px;
            height: 50px;
            background: center no-repeat
              // url(https://img.js.design/assets/img/612c3a329c042d00d487c47e.png);
              url("~@/assets/logo.png");
            background-size: 100px 50px;
          }
          .left-two {
            margin-top: 20px;
            width: 520px;
            text-align: center;
            color: rgba(255, 255, 255, 1);
            font-size: 30px;
            line-height: 33px;
          }
          .left-three {
            width: 520px;
            margin-top: 15px;
            text-align: center;
            color: rgba(255, 255, 255, 0.56);
            letter-spacing: 0.4px;
            font-size: 14px;
            line-height: 22px;
          }
        }
      }
      .content {
        width: 100%;
        height: 100%;
        // width: 1200px;
        // height: 600px;
        // background-image:url(https://img.js.design/assets/img/612999769c042d00d48150ee.jpg) ;
        // background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        .org-list {
          width: 690px;
          height: 350px;
          background-color: rgba(0, 81, 81, 1);
          position: relative;

          .org-title {
            height: 60px;
            border-bottom: $appMainTextColor 1px solid;
            color: $appMainTextColor;
            padding-left: 20px;
            font-size: 23px;
            display: flex;
            align-items: center;
            .sel-te {
              padding-left: 10px;
              line-height: 27px;
              height: 27px;
              border-left: $appMainTextColor 4px solid;
              color: $appMainTextColor;
              font-size: 23px;
            }
          }
          .search {
            width: 680px;
            height: 50px;
            margin-top: 40px;
            margin-bottom: 30px;
            display: flex;
            .search-input {
              outline: none;
              border: $appMainTextColor 2px solid;
              font-size: 18px;
              width: 520px;
              margin-left: 45px;
              // margin-right: 35px;
              height: 40px;
            }
            .search-button {
              color: $appMainTextColor;
              width: 80px;
              height: 40px;
              line-height: 40px;
              font-size: 18px;
              text-align: center;
              background-color: #7fd354;
              border-top-left-radius: 0px;
              border-top-right-radius: 2px;
              border-bottom-right-radius: 2px;
              border-bottom-left-radius: 0px;
              cursor: pointer;
            }
          }
          .company-list {
            width: 680px;
            height: 152px;
            padding-left: 10px;
            padding-right: 50px;
            overflow: auto;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            .toindex-but {
              position: absolute;
              right: 20px;
              // top: ;
              margin-left: 20px;
              width: 50px;
              height: 32px;
              cursor: pointer;
              color: $appMainTextColor;
              line-height: 32px;
              white-space: nowrap;
              // padding: 10px;
              text-align: center;
              background-color: #7fd354;
              border-top-left-radius: 0px;
              border-top-right-radius: 2px;
              border-bottom-right-radius: 2px;
              border-bottom-left-radius: 0px;
            }
          }
          .sel-company {
            width: 242px;
            height: 46px;
            margin: 0px 30px 30px 30px;
            white-space: nowrap;
            cursor: pointer;
            padding: 0 10px;
            background-color: transparent;
            border: $appMainTextColor 1px solid;
            line-height: 46px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            color: $appMainTextColor;
          }
          .sel-company:hover {
            background-color: $appMainTextColor;
            color: rgba(0, 81, 81, 1);
          }
          .sel-companys {
            width: 242px;
            height: 46px;
            margin: 0px 30px 30px 30px;
            white-space: nowrap;
            cursor: pointer;
            padding: 0 10px;
            background-color: transparent;
            border: $appMainTextColor 1px solid;
            line-height: 46px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            // color: $appMainTextColor;
            background-color: $appMainTextColor;
            color: rgba(0, 81, 81, 1);
          }
        }
        .farm-list {
          width: 690px;
          height: 350px;
          background-color: rgba(0, 81, 81, 1);
          .org-title {
            height: 60px;
            border-bottom: $appMainTextColor 1px solid;
            color: $appMainTextColor;
            padding-left: 20px;
            font-size: 23px;
            display: flex;
            align-items: center;
            .sel-te {
              padding-left: 10px;
              line-height: 27px;
              height: 27px;
              border-left: $appMainTextColor 4px solid;
              color: $appMainTextColor;
              font-size: 23px;
            }
          }
          .organization-list {
            width: 680px;
            height: 228px;
            margin-top: 40px;
            padding-left: 10px;
            overflow: auto;
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            display: flex;
            .toindex-but {
              margin-left: 20px;
              width: 50px;
              height: 32px;
              cursor: pointer;
              color: $appMainTextColor;
              line-height: 32px;
              white-space: nowrap;
              text-align: center;
              background-color: #7fd354;
              border-top-left-radius: 0px;
              border-top-right-radius: 2px;
              border-bottom-right-radius: 2px;
              border-bottom-left-radius: 0px;
            }
          }
          .sel-organization {
            width: 270px;
            height: 46px;
            margin: 0px 30px 30px 30px;
            white-space: nowrap;
            cursor: pointer;
            background-color: transparent;
            border: $appMainTextColor 1px solid;
            line-height: 46px;
            text-align: center;
            color: $appMainTextColor;
          }
          .sel-organization:hover {
            background-color: $appMainTextColor;
            color: rgba(0, 81, 81, 1);
          }
        }
      }
    }
  }
}
.dzConfidentiality {
  width: 100%;
  ::v-deep .el-form-item {
    .el-form-item__content {
      flex-direction: row;
      .el-input {
        width: 100%;
      }
    }
  }
}
::v-deep {
  .el-dialog {
    margin-top: 8vh !important;
    height: 86vh;
  }
  .el-dialog__body {
    height: 75vh;
    overflow-y: hidden;
  }
  .el-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;

    .total-price {
      color: #000;
    }

    .el-row {
      width: 100%;
      margin-bottom: 10px;

      .el-table {
        max-height: 200px;
        overflow-y: auto;
        background-color: rgba(255, 255, 255, 1);

        .cell {
          color: #000;
        }

        th {
          background-color: rgba(230, 230, 230, 1);
        }

        th.is-leaf {
          border-color: rgba(77, 77, 77, 1);
        }

        td {
          border-color: rgba(77, 77, 77, 1);
        }

        tr:hover {
          background-color: rgba(77, 77, 77, 1);
        }

        .el-table__empty-text {
          color: #000;
        }

        .current-row {
          // background-color: rgb(177, 177, 177);
          background-color: #dbdbdb !important;
        }

        .el-table__row--striped {
          background-color: rgba(255, 255, 255, 1);
        }

        // color: #000;
      }

      .el-table--border {
        border-color: rgba(77, 77, 77, 1);
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      }

      .el-table--enable-row-hover .el-table__body tr:hover > td {
        background-color: rgb(177, 177, 177);
      }

      .el-table__body tr.current-row > td {
        background-color: #dbdbdb !important;
      }

      // .el-button {
      //   width: 100%;
      // }
      .el-form {
        // width: 100%;
        // margin: ;
        .el-form-item {
          margin-bottom: 0 !important;
        }

        .el-form-item__content {
          display: flex;
          width: 100%;

          .el-select {
            min-width: 15%;
          }

          .el-input {
            min-width: 10%;
          }

          .el-input__inner {
            border-right: none;
          }

          .el-button {
            min-width: 5%;
            margin-left: 10px;
          }
        }
      }
    }

    .el-form-item {
      display: flex;
      align-items: flex-start;

      .el-form-item__label {
        line-height: 36px;
        min-width: 120px;
        text-align: end;
      }

      .el-form-item__content {
        line-height: 36px;
        width: 100%;
        display: flex;
        // flex-direction: row;
        flex-wrap: wrap;
      }
    }
  }
}
</style>
<style lang="scss">
.el-scrollbar__wrap {
  overflow-x: hidden;
}
.is-horizontal {
  display: none;
}
</style>
